<template>
  <div class="center-tools">
    <h1 class="title border-bottom-1px">
      <span class="text">我的工具</span>
    </h1>
    <ul class="menu">
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="clickItem(item)"
      >
        <span class="icon">
          <img :src="'/service/' + item.image + '.png'" />
        </span>
        <span class="text">{{ item.text }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import menu from '@/views/service/tools'
export default {
  name: 'CenterService',
  data() {
    return {
      list: []
    }
  },
  methods: {
    clickItem(item) {
      if (!item.url) {
        return
      }
      if (item.url.substring(0, 1) === '/') {
        this.$router.push(item.url)
      } else {
        this.$router.push(`/service/${item.url}`)
      }
    }
  },
  activated () {
    // const isMerchant = !!this.$store.getters['ExecUser/info'].merchant
    // let isMerchant = false
    // if (this.$store.getters['ExecUser/info']) {
    //   const merchant = this.$store.getters['ExecUser/info'].merchant
    //   if (merchant && +merchant.status === 1) {
    //     isMerchant = true
    //   }
    // }
    // this.list = [...menu(isMerchant)]
    this.list = [...menu()]
  }
}
</script>

<style scoped lang="stylus">
.center-tools
  margin 10px
  background white
  border-radius 5px
  .title
    height 45px
    line-height 45px
    padding 0 10px
    display flex
    justify-content space-between
    .text
      font-weight 700
      font-size 14px
  .menu
    display flex
    flex-wrap wrap
    //justify-content space-around
    padding 15px 0
    li
      width 25%
      margin 10px 0 16px 0
    //background black
    //margin-right 1px
    li > span
      //display block
      margin auto
      &.icon
        display flex
        align-items center
        height 35px
        padding 10px
        width 35px
        //width 100%
        //background red
        img
          width auto
          height auto
          max-width 100%
          max-height 100%

      &.text
        //margin-top 5px
        margin-top 0
</style>
